<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="一级分类" style="margin-left: 150px">
        <el-select
          placeholder=""
          value=""
          v-model="category1Id"
          @change="handel1"
          :disabled="isShow"
        >
          <el-option
            :label="c1.name"
            :value="c1.id"
            v-for="c1 in category1"
            :key="c1.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类" style="margin-left: 150px">
        <el-select
          placeholder=""
          value=""
          v-model="category2Id"
          @change="handel2"
          :disabled="isShow"
        >
          <el-option
            :label="c2.name"
            :value="c2.id"
            v-for="c2 in category2"
            :key="c2.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类" style="margin-left: 150px">
        <el-select
          placeholder=""
          value=""
          v-model="category3Id"
          @change="handel3"
          :disabled="isShow"
        >
          <el-option
            :label="c3.name"
            :value="c3.id"
            v-for="c3 in category3"
            :key="c3.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "MyCategorySelect",
  props: ["isShow"],
  data() {
    return {
      category1: [],
      category1Id: "",
      category2: [],
      category2Id: "",
      category3: [],
      category3Id: "",
    };
  },
  mounted() {
    this.getCategory1();
  },
  methods: {
    // 获取一级分类数据
    getCategory1() {
      this.$API.attr
        .reqCategory1()
        .then((res) => {
          if (res.code === 200) {
            this.category1 = res.data;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 一级分类选择完成后携带id 请求二级分类数据
    handel1() {
      // 当一级分类文本在次改变 则清空二三级分类列表、id 保证整个三级分类的数据彼此呼应
      this.category2 = [];
      this.category2Id = "";
      this.category3 = [];
      this.category3Id = "";
      this.$API.attr
        .reqCategory2(this.category1Id)
        .then((res) => {
          if (res.code === 200) {
            this.category2 = res.data;
            // 将分类id打上身份标识传给父组件
            this.$emit("getAttrInfoList", {
              categoryId: this.category1Id,
              leave: "1",
            });
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 二级分类选择完成后携带id 请求三级分类数据
    handel2() {
      this.category3 = [];
      this.category3Id = "";
      this.$API.attr
        .reqCategory3(this.category2Id)
        .then((res) => {
          if (res.code === 200) {
            this.category3 = res.data;
            // 将分类id打上身份标识传给父组件
            this.$emit("getAttrInfoList", {
              categoryId: this.category2Id,
              leave: "2",
            });
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 三级分类
    handel3() {
      // 将分类id打上身份标识传给父组件
      this.$emit("getAttrInfoList", {
        categoryId: this.category3Id,
        leave: "3",
      });
    },
  },
};
</script>

<style>
</style>